<template>
    <div class="top">
        <dv-decoration-2 style="height:5px;" />
        <div class="top">
            <p class="title">Vue3 + DataV + ECharts 可视化</p>
            <dv-decoration-8 style="width:280px;height:50px;" />
            <dv-decoration-8 :reverse="true" style="width:280px;height:50px;" />
        </div>
        <dv-decoration-2 style="height:5px;transform: rotateY(180deg);" />
    </div>
    <div class="box">
        <dv-border-box-8 style="width:30%;height: 200px; " title="dv-border-box-8">
            <!-- <charts width="100%" height="500px" /> -->
            <dv-capsule-chart :config="config" style="height:200px" />
        </dv-border-box-8>
        <dv-border-box-1 style="height: 200px; " title="dv-border-box-1">
            <dv-decoration-3 style="width:66%;height:200px;" />

        </dv-border-box-1>
    </div>
    <div class="box">
        <dv-border-box-2 style="height: 500px; " title="dv-border-box-2">
            <dv-flyline-chart :config="config2" style="width:100%;height:100%;" />
        </dv-border-box-2>
        <dv-border-box-3 style="width:40%;height: 500px; " title="dv-border-box-3">
            <!-- <charts width="100%" height="500px" /> -->
        </dv-border-box-3>
    </div>
    <div class="box">
        <dv-border-box-4 style="width:70%;height: 200px; " title="dv-border-box-4">
            <dv-percent-pond :config="config4" style="width:200px;height:100px;" />

        </dv-border-box-4>
        <dv-border-box-6 style="height: 200px; " title="dv-border-box-6">
            <dv-conical-column-chart :config="config3" style="width:400px;height:200px;" />

        </dv-border-box-6>
    </div>
</template>
<script setup>
import { onMounted, ref, reactive, defineProps } from 'vue';
import * as echarts from 'echarts';
import charts from '../map/index.vue'
const config = reactive({
    data: [
        {
            name: '南阳',
            value: 167
        },
        {
            name: '周口',
            value: 67
        },
        {
            name: '漯河',
            value: 123
        },
        {
            name: '郑州',
            value: 55
        },
        {
            name: '西峡',
            value: 98
        }
    ]
})
const config2 = reactive({
    centerPoint: [0.48, 0.35],
    points: [
        [0.52, 0.23],
        [0.43, 0.29],
        [0.59, 0.35],
        [0.53, 0.47],
        [0.45, 0.54],
        [0.36, 0.38],
        [0.62, 0.55],
        [0.56, 0.56],
        [0.37, 0.66],
        [0.55, 0.81],
        [0.55, 0.67],
        [0.37, 0.29],
        [0.20, 0.36],
        [0.76, 0.41],
        [0.59, 0.18],
        [0.68, 0.17],
        [0.59, 0.10]
    ],
    // bgImgUrl: '/img/flylineChart/map.jpg'
})
const config3 = reactive({
    data: [
        {
            name: '周口',
            value: 55
        },
        {
            name: '南阳',
            value: 120
        },
        {
            name: '西峡',
            value: 71
        },
        {
            name: '驻马店',
            value: 66
        },
        {
            name: '新乡',
            value: 80
        },
        {
            name: '信阳',
            value: 35
        },
        {
            name: '漯河',
            value: 15
        }
    ],
    img: [
        // '/img/conicalColumnChart/1st.png',
        // '/img/conicalColumnChart/2st.png',
        // '/img/conicalColumnChart/3st.png',
        // '/img/conicalColumnChart/4st.png',
        // '/img/conicalColumnChart/5st.png',
        // '/img/conicalColumnChart/6st.png',
        // '/img/conicalColumnChart/7st.png'
    ]
})
const config4 = reactive({

    value: 66,
    borderWidth: 5,
    borderRadius: 10,
    borderGap: 5

})
</script>
  
<style scoped>
.box,
.top {
    color: #fff;
    background-color: black;
    display: flex;
    justify-content: space-between;
    padding: 10px;
}

.top {
    position: relative;
}

.title {
    position: absolute;
    left: 50%;
    top: 0%;
    transform: translate(-50%, -50%);
}
</style>
  